import React, { useEffect, useState } from 'react'
import {GouWrapper} from './style'
import jianhao from '../../assets/images/jianhao.png'
import jiahao from '../../assets/images/jiahao.png'


export default function GouCart({item}) {
    const [cartList,setCartList]=useState([])
    const [shoplist,setShoplist]=useState([])
    const [totalPrice,setTotalPrice]=useState('0')
    const [isShow,setIsShow]=useState(true)
useEffect(()=>{
   
    setCartList(item)
    const newList = JSON.parse(localStorage.getItem('list'))
    setShoplist(newList)
   total()
  //  quanxuan()
   
})
// const quanxuan=()=>{
 
//  if(isShow==true){
//   const newList = JSON.parse(localStorage.getItem('list'))
//   newList.map((item)=>{   
//       item.select=true
      
//   })
//   localStorage.setItem('list', JSON.stringify(newList))
//  }
 
// }
const total=()=>{
  const newList = JSON.parse(localStorage.getItem('list'))
  let totals=0
  newList.map(item=>{
    if(item.select==true){
      totals+=item.price*item.num
    }
  })
  setTotalPrice(totals)
}
const removecart=(id)=>{
localStorage.clear()
let shoplists= shoplist.filter((item)=>{
  return item.id !==id
})
const list = []
shoplists.map(data=>{
  list.push({
  id: data.id,
  title: data.title,
  images:data.images,
  price:data.price,
  store:data.store,
  num: data.num,
  select: false
})
})
console.log(list+'------------')
localStorage.setItem('list', JSON.stringify(list))

 }
const reduceNum=(index)=>{
  const newList = JSON.parse(localStorage.getItem('list'))
  newList.map((item)=>{
if(item.id==index){
  if(item.num==1){
    item.num==1
  }else{
    item.num--
  }
}
  })
   
    localStorage.setItem('list', JSON.stringify(newList))
}
const addNum=(index)=>{
  const newList = JSON.parse(localStorage.getItem('list'))
    newList.map((item)=>{
      if(item.id==index){
        item.num++
      }
    })
    localStorage.setItem('list', JSON.stringify(newList))
}
const isSelect=(index)=>{
  const newList = JSON.parse(localStorage.getItem('list'))
  newList.map((item)=>{
    if(item.id==index){
      item.select=!item.select      
    }
  })
  localStorage.setItem('list', JSON.stringify(newList))
  
  
}
const handleSelect=()=>{
  const newList = JSON.parse(localStorage.getItem('list'))
  newList.map((item)=>{ 
    if(item.select==false){
      item.select=true
    }              
  })
  localStorage.setItem('list', JSON.stringify(newList))
  setIsShow(!isShow)
}
  return (
    <GouWrapper>           
     <div className="cart-header">
        <p>{cartList.store}&gt;</p>
        <span onClick={()=>removecart(cartList.id)}><i className='fa fa-times'></i></span>
     </div>
     <div className="cart-body">
      <div className='cart-body-input' onClick={()=>isSelect(cartList.id)}>
         <input type="checkbox" checked={cartList.select==true? true:false}/>
      </div>
       <div className='cart-body-img'> 
        <img src={cartList.images} alt="" />
       </div>
       <div className="cart-body-title">
        <p>{cartList.title}</p>
        <div className='cart-body-header'>
             <p> <strong>￥</strong> {cartList.price}</p>
            <div className="content-right-operate">
              <div className="addOrder"onClick={()=>reduceNum(cartList.id)} >
                <img src={jianhao} alt="" />
              </div>
              <div className="orderNum">{cartList.num}</div>
              <div className="reduceOrder" onClick={()=>addNum(cartList.id)}>
                <img src={jiahao} alt="" />
              </div>
            </div>
            
        </div>
     
       </div>
     </div>
     <div className="shopCart-tab">
                <div className="shopCart-tab__left"
                  onClick={()=>handleSelect()}>
                  <input type="checkbox" checked={isShow} />
                  <p>全选</p>
                </div>                                                   
                      <div className="shopCart-tab__right">
                        结算                
                      
                    </div>
                <div className="shopCart-center">
                        <div className="shopCart-center__top">
                          总计: <span>￥{totalPrice}</span>
                        </div>
                        <div className="shopCart-center__bottom">
                          免运费
                </div>
                      </div>
              </div>
    </GouWrapper>
  )
}
